<script setup lang="ts">
definePage({
  meta: {
    title: '复合组件',
  },
})

const fieldPickerValue = ref('')
const fieldPickerColumns = ref([
  { text: '杭州', value: 'Hangzhou' },
  { text: '宁波', value: 'Ningbo' },
  { text: '温州', value: 'Wenzhou' },
  { text: '绍兴', value: 'Shaoxing' },
  { text: '湖州', value: 'Huzhou' },
])

const fieldDatePickerValue = ref()

const fieldCalendarValue = ref('')
const fieldCalendarValue2 = ref('')
</script>

<template>
  <FmPageLayout navbar navbar-start-side="back">
    <div class="flex flex-col gap-4 p-4">
      <FmPageMain class="m-0">
        Vant 提供的组件大多数比较原子化，在实际业务开发中，往往一个功能需要通过多个组件结合使用才能实现。本框架则将一些常用的功能封装成复合组件，方便开发者使用。
      </FmPageMain>
      <FmPageMain title="VanFieldPicker" class="m-0">
        <van-field-picker v-model="fieldPickerValue" placeholder="请选择" :border="false" :columns="fieldPickerColumns" />
        <van-divider />
        选中值: {{ fieldPickerValue }}
      </FmPageMain>
      <FmPageMain title="VanFieldDatePicker" class="m-0">
        <van-field-date-picker v-model="fieldDatePickerValue" placeholder="请选择" :border="false" />
        <van-divider />
        选中值: {{ fieldDatePickerValue }}
      </FmPageMain>
      <FmPageMain title="VanFieldCalendar" class="m-0">
        <van-field-calendar v-model="fieldCalendarValue" placeholder="请选择" :border="false" />
        <van-divider />
        选中值: {{ fieldCalendarValue }}
      </FmPageMain>
      <FmPageMain title="VanFieldCalendar 格式化" class="m-0">
        <van-field-calendar v-model="fieldCalendarValue2" placeholder="请选择" :border="false" format="MM-DD" value-format="YYYY-MM-DD" />
        <van-divider />
        选中值: {{ fieldCalendarValue2 }}
      </FmPageMain>
    </div>
  </FmPageLayout>
</template>
